<template>
  <div>
    <van-sticky>
      <div class="nav">
        <van-icon name="arrow-left" size="20" color="#aaa" @click="router.go(-1)"/>
        <van-tabs class="tabs" v-if="project==1||project==2||project==3" v-model:active="activeA" type="card" color="#333" sticky >
          <van-tab title="答题" name="1"></van-tab>
          <van-tab title="背题" name="2"></van-tab>
        </van-tabs>
        <div class="time" v-if="!project" @click="pause">
          <van-icon v-show="timePlay" name="pause-circle-o" size="16" />
          <van-icon v-show="!timePlay" name="play-circle-o" size="16" />
          <div>
            <span>倒计时</span>
            <van-count-down
              class="timer"
              ref="countDown"
              :time="time"
              format="mm:ss"
              @finish="onFinish"
              @change="onChange"/>
          </div> 
        </div>
        <div class="search" v-if="subject>10">
          搜题结果
        </div>
        <!-- <span @click="showPopup">选题</span> -->
        <van-dropdown-menu class="select" v-if="subject<10">
          <van-dropdown-item v-model="project" :options="projectOpt" />
        </van-dropdown-menu>
      </div>
    </van-sticky>
    <div class="content" v-for="item,i in testsBank2">
      <template v-if="i==num">
        <!-- 答题 -->
        <div class="info" v-show="activeA==1&&subject<10">
          <div class="subject">
            <div>
              <span>{{ item.option.length==2?'判断':item.ok.length==1?'单选':'多选' }}</span>
              <span>{{ item.title }}</span> 
            </div>  
          </div>
          <div v-show="item.pic" class="pic">
            <img :src="item.pic" alt="">
          </div>
          <div class="option">
            <div v-for="item2,i2 in item.option" @click="clickC(i,i2)">
              <div :class="item2.result==1||item2.result==4?'ok':item2.result==2?'err':item2.result==3?'no':''">
                <span :class="item2.result==3||item2.result==4?'not':''" v-show="item2.result!=1&&item2.result!=2">{{ item2.name }}</span>
                <van-icon name="success" color="#fff" v-show="item2.result==1" />
                <van-icon name="cross" color="#fff" v-show="item2.result==2" />
              </div>
              <span :class="item2.result==1||item2.result==4?'ok':item2.result==2?'err':''">{{ item2.value }}</span>
            </div>
          </div>
          <div class="resultBox">
            <div v-show="item.ok.length>1&&!item.state" class="submit" @click="clickF(i)">
              确认答案
            </div>
            <div v-show="item.state" class="result">
              <div>
                <span>答案</span>
                <span class="letter">{{ item.ok.toString().replace(/,/gi,' ') }}</span>
              </div>
              <div>
                <span>您选择</span>
                <span class="letter" :class="item.state==2?'err':''">{{ item.opt.join(' ') }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 背题 -->
        <div class="info" v-show="activeA==2||subject>10">
          <div class="subject">
            <div>
              <span>{{ item.option.length==2?'判断':item.ok.length==1?'单选':'多选' }}</span>
              <span>{{ item.title }}</span> 
            </div>  
          </div>
          <div v-show="item.pic" class="pic">
            <img :src="item.pic" alt="">
          </div>
          <div class="option">
            <div v-for="item2 in item.option">
              <div :class="item2.result2==1?'ok':''">
                <span v-show="item2.result2==2">{{ item2.name }}</span>
                <van-icon name="success" color="#fff" v-show="item2.result2==1" />
                <!-- <van-icon name="cross" color="#fff" v-show="item2.result==2" /> -->
              </div>
              <span :class="item2.result2==1?'ok':''">{{ item2.value }}</span>
            </div>
          </div>
          <div class="resultBox">
            <div class="result">
              <div>
                <span>答案</span>
                <span class="letter" v-show="item2.result2==1" v-for="item2 in item.option">{{ item2.name }}</span>
              </div>
            </div>
          </div>
          <div class="explain">
            <p>题目解析</p>
            <p>{{ item.explain }}</p>
          </div>
        </div>
        
        <div class="control">
          <van-icon v-show="num>=1&&subject<10" class="left btn" name="arrow-left" size="70" @click="clickD(0)"/>
          <van-icon v-show="num<total-1&&subject<10" class="right btn" name="arrow" size="70" @click="clickD(1)"/>
        </div>
  
        <div class="footer" v-if="subject<10">
          <div>
            <div v-if="project==2||project==3" class="dele" @click="clickH(i)">
              <van-icon class="del" name="delete-o" size="17"/>
              <span v-if="project==3">移除</span>
            </div>
            <div class="collect" @click="clickA(i)">
              <van-icon v-show="!item.collect&&project!=3" name="star-o" size="15"/>
              <van-icon v-show="item.collect&&project!=3" name="star" size="15" color="#F8CF35"/>
              <span v-if="project==1||subject>10">收藏</span>
            </div>
            <span class="sub" v-if="!project" @click="clickG">交卷</span>
          </div>
          <div class="mark" v-if="subject<10">
            <div class="ok">
              <van-icon name="checked" color="#1CADF8" size="14"/>
              <span>{{ oks }}</span>
            </div>
            <div class="err">
              <van-icon name="clear" color="#FD6864" size="14"/>
              <span>{{ errs }}</span>
            </div>
          </div>
          <div v-if="subject<10" class="counts" @click="showPopup">
            <van-icon name="apps-o" color="#A1A1A1"/>
            <span><span>{{ num + 1 }}</span>/{{ total }}</span>
          </div>
        </div>
      </template>  

    </div>
    <p class="message" v-if="project==2&&!total">您还没有错题记录，请选择练习或考试</p>
    <p class="message" v-if="project==3&&!total">您还没有收藏记录，请选择练习或考试</p>
    <!-- 底部弹出 -->
    <van-popup id="pageBox"
      v-model:show="showBottom"
      position="bottom"
      :style="{ height: '70%' }">
      <div class="pages">
        <ul>
          <li 
            v-for="item,i in testsBank2"
            :class="item.state==1&&i==num?'ok active':item.state==2&&i==num?
            'err active':item.state==1?'ok':item.state==2?'err':i==num?'active':''"         
            @click="clickB(i)">
            {{ i + 1 }}
            <van-icon class="collect-active" v-show="item.collect" name="star-o" size="15" color="#fff"/>
            <van-icon class="collect-active" v-show="item.collect" name="star" size="14" color="#F8CF35"/>
          </li>
        </ul>
        <div class="end" v-if="project==1">
          <span>清除记录，重新开始学习</span>
          <span class="btn" @click="clickE">清除当前做题记录</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import {ref,reactive,watch,onMounted} from 'vue'
import { showConfirmDialog, showNotify, showDialog, showToast} from 'vant'
import httpApi from '@/http'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import 'vant/es/notify/style'
import 'vant/es/dialog/style'
import 'vant/es/toast/style'

const route = useRoute()
const router = useRouter()
const store = useStore()

const subject = route.params.id
let locking1 = false
let locking2 = false


onMounted(()=>{
  console.log('用户ID:'+store.state.user.user_id,'用户名:'+store.state.user.user_name)
})

const project = ref(-1)
let subj = ''
if(subject==1||subject==2||subject==3||subject==4) {
  subj = '科目一'
}else if(subject<10) {
  subj = '科目四'
}else {
  subj = null
}
const projectOpt = [
  { text: '考试', value: 0 },
  { text: '练习', value: 1 },
  { text: '错题', value: 2 },
  { text: '收藏', value: 3 },
]
if(subject==1||subject==5){
  project.value = 1
}
if(subject==2||subject==6){
  project.value = 0
}
if(subject==3||subject==7){
  project.value = 2
}
if(subject==4||subject==8){
  project.value = 3
}


watch(project,(newval,oldval)=>{
  activeA.value = '1'
  num.value = 0

  init1()
  init2()
})

const timePlay = ref(true)
const countDown = ref(null)
const time = ref(1 * 60 * 1000)
const current = ref(0)
const pause = ()=>{
  if(timePlay.value) {
    countDown.value.pause()
    showDialog({
      message: '点击按钮继续答题',
      theme: 'round-button',
      confirmButtonText: '继续答题',
    }).then(() => {
      countDown.value.start()
      timePlay.value = !timePlay.value
    })
  }else {
    countDown.value.start()
  }
  timePlay.value = !timePlay.value
}

const transcript = reactive([])
const onFinish = async ()=>{
  let grade_subj = subj
  let userId = store.state.user.user_id
  await httpApi.gradesApi.queryByUser({userId,grade_subj}).then(res=>{
    console.log('成绩单',res)
    res.data.data.forEach(item=>{
      transcript.push(item)
    })
  })
  console.log(transcript)
  let bid = transcript.length
  let sum = 0
  for(let i=0;i<transcript.length;i++) {
    sum += transcript[i].grade_num
  }
  let grade = oks.value * 10
  let avg = (sum+grade)/(bid+1)
  let useTime = current.value
  let time = `${Math.floor(useTime/60)?Math.floor(useTime/60)+'分':''}${useTime%60}秒`
  let d = new Date()
  let year = d.getFullYear()
  let month = d.getMonth() + 1
  month = month<10 ? "0" + month : month
  let day = d.getDate()
  let date = `${year}年${month}月${day}日`
  showDialog({
    message: `您${grade_subj}的第${bid+1}次考试,成绩${grade}分,用时${time},当前平均分为${avg.toFixed(2)},考试日期是${date}`,
  }).then(() => {
    let grade_num = grade 
    let grade_time = time
    let grade_date = date
    let grade_avg = avg.toFixed(2)
    
    let userName = store.state.user.user_name
    let params = { grade_num, grade_time, grade_date, grade_avg, grade_subj, userId, userName}

    httpApi.gradesApi.add(params).then(res=>{
      // console.log(res)
      router.go(-1)
    })
  })
}
const onChange = (x)=>{
  current.value = Math.floor((time.value - x.total)/1000)
}
const activeA = ref('1')
const showBottom = ref(false);
const showPopup = ()=>{
  showBottom.value = true;
}

const testsBank = []
const testsBank1 = reactive([])
const testsBank2 = reactive([])
const letter = ['A','B','C','D']
const num = ref(0)
const total = ref(0)
const oks = ref(0)
const errs = ref(0)
const doneBook = reactive([])
const errBook = reactive([])
const collectBook = reactive([])
const collectBook2 = reactive([])

const init = async ()=>{
  if(subject>10) {
    let exercise_id = subject-10
    await httpApi.exerApi.queryById({exercise_id}).then(res=>{
      console.log('id查题',res);
      testsBank.push(res.data.data.result[0]) 
    })
    init1()
    testsBank2.push(testsBank1[0])
    console.log(testsBank2)

  }else {
    let subjectstype = subj
    let done_subj = subj
    let resp = await httpApi.exerApi.queryBySubj({subjectstype})
    // console.log('查询所有题',resp)
    let arr1 = resp.data.data
    let userId = store.state.user.user_id
    let resp2 = await httpApi.doneApi.queryByUserA({userId,done_subj})
    // console.log('已激活题',resp2)
    let arr2 = resp2.data.data
  
    testsBank.splice(0)
    doneBook.splice(0)
    collectBook.splice(0)
    arr1.forEach((item1,index)=>{
      testsBank.push(item1)
      arr2.forEach(item2=>{
        if(item2.exerId==item1.exercise_id) {
          let did = item2.done_id
          // let aid = index
          let id = item2.exerId
          let title = item1.exercise_text
          let pic = item1.exercise_cover
          let ok = item1.exercise_answers.split(', ')
          let explain = item1.exercise_resolve
          let collect = false 
          if(item2.done_collect==1) {
            collect = true
            collectBook.push({id:item2.exerId, collect})
          }
          let state = item2.done_state
          let options = item2.done_option.split(',')
          let opt = []
          if(item2.done_opt) {
            opt = item2.done_opt.split(',')
          }
          let subject = item1.subjectstype
          let option = []
  
          item1.exercise_options.split('; ').forEach((value,index)=>{
            let name = letter[index]
            let result = options[index]
            let result2 = 0
        
            if(ok.indexOf(name) >= 0) {
              result2 = 1
            }else {
              result2 = 2
            }
            option.push({index,name,value,result,result2})
          })
          doneBook.push({did,id,title,pic,option,ok,explain,collect,state,opt,subject})
        }
      })
    })
  
    // console.log(testsBank);
    // console.log(doneBook);
    // console.log(collectBook);
    init1()
    init2()
  }
}

const init1 = ()=>{
  testsBank1.splice(0)
  testsBank.forEach((item,index)=>{
    let aid = index
    let id = item.exercise_id
    let title = item.exercise_text
    let pic = item.exercise_cover
    let ok = item.exercise_answers.split(', ')
    let explain = item.exercise_resolve
    let collect = false 
    let state = 0
    let option = []
    let opt = []
    let subject = item.subjectstype
    
    item.exercise_options.split('; ').forEach((value,index)=>{
      let name = letter[index]
      let result = 0
      let result2 = 0
  
      if(ok.indexOf(name) >= 0) {
        result2 = 1
      }else {
        result2 = 2
      }

      option.push({index,name,value,result,result2})
    })

    testsBank1.push({aid,id,title,pic,option,ok,explain,collect,state,opt,subject})  
  })
}

const init2 = function() {
  testsBank2.splice(0)
  errBook.splice(0)
  collectBook2.splice(0)

  doneBook.forEach(item=>{
    if(collectBook.some(v=>v.id==item.id&&v.collect)) {
      item.collect = true
    }else {
      item.collect = false
    }
  })

  doneBook.forEach(item1=>{
    testsBank1.forEach(item2=>{
      if(item2.id==item1.id) {
        item2.did = item1.did
        item2.collect = item1.collect
        if(project.value==1) {
          item2.state = item1.state
          item2.option = item1.option
          item2.opt = item1.opt
        }
      }
    })
  })
  // console.log(testsBank1)
  if(project.value==1){
    testsBank1.forEach(item=>testsBank2.push(item))
  }else {
    if(project.value==2||project.value==3){
      doneBook.forEach(item1=>{
        let did = item1.did
        let id = item1.id
        let aid = item1.aid
        let title = item1.title
        let pic = item1.pic
        let ok = item1.ok
        let explain = item1.explain
        let collect = item1.collect
        let subject = item1.subject
        let option = []
        let state = 0
        let opt = []
        item1.option.forEach((item2,index)=>{
          let name = item2.name
          let result = 0
          let result2 = item2.result2
          let value = item2.value
          option.push({index,name,value,result,result2})
        })
        if(item1.state==2){
          errBook.push({did,id,aid,title,pic,option,ok,explain,collect,state,opt,subject})
        }
        if(item1.collect) {
          collectBook2.push({did,id,aid,title,pic,option,ok,explain,collect,state,opt,subject})
        }
      })

      let subjectstype = subj
      if(project.value==2){
        errBook.forEach(item=>{
          if(item.subject==subjectstype) {
            testsBank2.push(item)
          }
        })
      }
      if(project.value==3){
        collectBook2.forEach(item=>{
          if(item.subject==subjectstype) {
            testsBank2.push(item)
          }
        })
      }
    }else {
      for(let i=0;i<10;i++) {
        let n = Math.floor(Math.random() * testsBank1.length)
        let item = testsBank1[n]
        testsBank2.push(item)
        testsBank1.splice(n,1)
      }
    }
  }
  // console.log(testsBank2)
  oks.value = 0
  errs.value = 0
  testsBank2.forEach(v=>{
    if(v.state==1){
      oks.value += 1
    }
    if(v.state==2){
      errs.value += 1
    }
  })
  total.value = testsBank2.length
}

const doneAdd = async function(i) {
  // console.log(testsBank2[i]);
  let done_state = testsBank2[i].state
  let done_collect = testsBank2[i].collect
  let options = []
  let done_opt = testsBank2[i].opt.join(',')
  let done_subj = subj
  let exerId = testsBank2[i].id
  let userId = store.state.user.user_id
  let userName = store.state.user.user_name
  testsBank2[i].option.forEach(v=>{
    options.push(v.result) 
  })
  let done_option = options.join(',')
  if(project.value==1||project.value==0) {

    // console.log(!collectBook.some(v=>v.id == testsBank2[i].id)&&!doneBook.some(v=>v.id==testsBank2[i].id))
    if(!collectBook.some(v=>v.id == testsBank2[i].id)&&!doneBook.some(v=>v.id==testsBank2[i].id)) {
      let params = {done_option,done_opt,done_state,done_collect,done_subj,exerId,userId,userName}
      httpApi.doneApi.add(params).then(res=>{
        // console.log(res)
        httpApi.doneApi.queryByUserC({userId,exerId}).then(res=>{
          // console.log(res)
          testsBank2[i].did = res.data.data[0].done_id
          doneBook.push(testsBank2[i])
          // console.log(testsBank2[i])
        })
      })
    }else {
      let done_id = testsBank2[i].did
      let params = {done_id,done_option,done_opt,done_state}
      console.log(params)
      httpApi.doneApi.update(params).then(res=>{
        console.log(res)
      })
      doneBook.forEach(item1=>{
        if(item1.did==testsBank2[i].did) {
          item1.state = testsBank2[i].state
          item1.opt = testsBank2[i].opt
          item1.option.forEach((item2,index)=>{
            item2.result = testsBank2[i].option[index].result
          })
        }
      })
    }
  }
}

// const errAdd = (i)=>{
//   if(!errBook.some(v=>{
//     return v.id==testsBank2[i].id
//   })&&doneBook.some(v=>{
//     return v.id==testsBank[i].id
//   })){
//     let done_state = testsBank2[i].state
//     let options = []
//     let done_opt = testsBank2[i].opt.join(',')
//     testsBank2[i].option.forEach(v=>{
//       options.push(v.result) 
//     })
//     let done_option = options.join(',')
//     let done_id = testsBank2[i].did
//     httpApi.doneApi.update({done_id,done_option,done_opt,done_state}).then(res=>{
//       console.log(res)
//     })
//     doneBook.forEach(item1=>{
//       if(item1.did==testsBank2[i].did) {
//         item1.state = testsBank2[i].state
//         item1.opt = testsBank2[i].opt
//         item1.option.forEach((item2,index)=>{
//           item2.result = testsBank2[i].option[index].result
//         })
//       }
//     })
//   }
// }

init()

const clickA = async function(i){
  if(locking1) return
  locking1 = true
  testsBank2[i].collect = !testsBank2[i].collect
  collectBook.forEach(item=>{
    if(item.id==testsBank2[i].id) {
      item.collect = !item.collect
    }
  })

  let exerId = testsBank2[i].id
  let userId = store.state.user.user_id
  // console.log(!collectBook.some(v=>v.id == testsBank2[i].id)&&!doneBook.some(v=>v.id==testsBank2[i].id))
  if(!collectBook.some(v=>v.id == testsBank2[i].id)&&!doneBook.some(v=>v.id==testsBank2[i].id)){
    let done_collect = 1
    let userName = store.state.user.user_name
    let options = []
    testsBank2[i].option.forEach(value=>{
      options.push(0)
    })
    let done_option = options.join(',')
    let done_subj = subj
    let params = {done_option,done_collect,done_subj,exerId,userId,userName}
    await httpApi.doneApi.add(params).then(res=>{
      // console.log(res)
    })
  }else {
    let done_id =  testsBank2[i].did
    let done_collect = 0
    if(testsBank2[i].collect) {
      done_collect = 1
    }
    // console.log(done_id,done_collect)
    await httpApi.doneApi.update({done_id,done_collect}).then(res=>{
      // console.log(res)
    })
  }
  
  if(testsBank2[i].collect) {
    showNotify({
      message: '收藏成功',
      background: 'rgba(0,0,0,0.6)',
      duration: 1300,
    })
  }
  if(!collectBook.some(v=>v.id == testsBank2[i].id)){
    collectBook.push({id:testsBank2[i].id, collect:testsBank2[i].collect})
  }
  // console.log(collectBook)
  if(!doneBook.some(v=>v.id==testsBank2[i].id)){
    httpApi.doneApi.queryByUserC({userId,exerId}).then(res=>{
      // console.log(res)
      testsBank2[i].did = res.data.data[0].done_id
      doneBook.push(testsBank2[i])
      // console.log(testsBank2[i])
    })
  }else {
    doneBook.forEach(item=>{
      if(item.id==testsBank2[i]){
        item.collect = !item.collect
      }
    })
  }
  setTimeout(function(){
    locking1 = false
  },500)
}

const clickH = function(i){
  if(locking2) true
  locking2 = true
  let done_id = testsBank2[i].did
  if(project.value==2) {
    doneBook.forEach(item1=>{
      if(item1.did==testsBank2[i].did) {
        item1.state = 0
        item1.opt = []
        item1.option.forEach(item2=>{
          item2.result = 0
        })
      }
    })
    // console.log(i,testsBank2)
    let options = []
    testsBank2[i].option.forEach(value=>{
      options.push(0)
    })
    let done_option = options.join(',')
    let done_state = 0
    let done_opt = ''
    httpApi.doneApi.update({done_id,done_option,done_opt,done_state}).then(res=>{
      console.log(res)
    })
  }
  if(project.value==3) {
    testsBank2[i].collect = false
    collectBook.forEach(item=>{
      if(item.id==testsBank2[i].id) {
        item.collect = false
      }
    })
    doneBook.forEach(item=>{
      if(item.did==testsBank2[i].did) {
        item.collect = false
      }
    })
    let done_collect = 0
    httpApi.doneApi.update({done_id,done_collect}).then(res=>{
      console.log(res)
    })
  }
  setTimeout(function(){
    locking2 = false
    if(num.value==total.value-1) {
      num.value = num.value - 1
    }
    // init1()
    init2()
  },500)
}

watch(num,(newval,oldval)=>{
  // console.log(newval,oldval)
  clickB(newval)
})

const clickB = function(i){
  num.value = i
  showBottom.value = false
}

const clickC = function(i,index) {
  // console.log(testsBank2[i].ok.join(''),testsBank2[i].ok,testsBank2[i].opt);
  if(testsBank2[i].state) return
  if(testsBank2[i].ok.length==1) {
    let x = testsBank2[i].option[index].result2
    
    testsBank2[i].opt.push(testsBank2[i].option[index].name)
    testsBank2[i].option.forEach(v=>{
      if(v.result2==1) {
        v.result = 1
      }
    })
    if(x==2) {
      testsBank2[i].option[index].result = 2
    }
    if(!testsBank2[i].state) {
      if(x==1) {
        testsBank2[i].state = 1
        oks.value += 1
      }else {
        testsBank2[i].state = 2
        errs.value += 1
        // errAdd(i)      
      }
    }
    // 添加到已做题库
    doneAdd(i)

    if(num.value<total.value-1) {
      setTimeout(function() {
        num.value += 1
      },500)
    }
    
  }else {
    if(testsBank2[i].option[index].result!=0) {
      testsBank2[i].option[index].result = 0
    }else {
      testsBank2[i].option[index].result = 3
    }
  }
}

const clickF = function(i) {
  let count = 0
  testsBank2[i].option.forEach(v=>{
    if(v.result!=0){
      count += 1
    }
  })
  if(count<2) {
    showToast('请至少选择两个答案')
    return
  }
  testsBank2[i].option.forEach(v=>{

    if(v.result!=0) {
      testsBank2[i].opt.push(v.name)
      v.result = v.result2
    }else{
      if(v.result2==1) {
        v.result = 4
      }
    }
  })  

  if(testsBank2[i].option.some(v=>v.result==2||v.result==4)) {
    testsBank2[i].state = 2
    errs.value += 1
    // errAdd(i)
  }else {
    testsBank2[i].state = 1
    oks.value += 1
  }
  // 添加到已做题库
  doneAdd(i)
  
  if(num.value<total.value-1) {
    setTimeout(function() {
      num.value += 1
    },500)
  }
}

const clickD = function(i) {
  if(i) {
    num.value += 1
  }else {
    num.value -= 1
  }
}

const clickE = ()=>{
  showConfirmDialog({
    title: '温馨提示',
    message:
      '您确定要清空当前做题记录并重新开始吗？'
  })
    .then(() => {
      oks.value = 0
      errs.value = 0
      testsBank2.forEach(item=>{
        item.opt = []
        item.state = 0
        item.option.forEach(item2=>{
          item2.result = 0
        })
      })
      doneBook.forEach(item=>{
        item.opt = []
        item.state = 0
        let done_id = item.did
        let options = []
        item.option.forEach(item2=>{
          item2.result = 0
          options.push(0)
        })
        let done_option = options.join(',')
        let done_state = 0
        let done_opt = ''
        
        httpApi.doneApi.update({done_id,done_option,done_opt,done_state}).then(res=>{
          showBottom.value = false
          pageBox.scrollTo(0,0)
        })
      })
    })
    .catch(() => {
      // on cancel
    });
}

const clickG = () => {
  countDown.value.pause()
  timePlay.value = !timePlay.value
  showConfirmDialog({
    message:
      '您确定现在要交卷吗？',
    theme: 'round-button',
    confirmButtonText: '现在交卷',
    cancelButtonText: '继续答题'
  })
    .then(() => {
      onFinish()
    })
    .catch(() => {
      countDown.value.start()
      timePlay.value = !timePlay.value
    });

}



</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 15px;
  font-size: 14px;
  >.tabs {
    width: 150px;
    margin-left: 20px;
  }
  >.time {
    margin-left: 20px;
    >div {
      display: inline-block;
      margin-left: 8px;
      position: relative;
      top: -1px;

      >.timer {
        display: inline-block;
      }
    }
  }
  .search {
    width: 100%;
    text-align: center;
  }
  .select {
    margin-right: 5px;
  }
}

.content {
  .info {
    padding: 10px 20px;
    width: 125%;
    transform: scale(0.8) translate(-12.5%,-12.5%);
    >.subject {
      margin-bottom: 15px;
      >div {
        line-height: 30px;
        >span:first-child {
          padding: 3px 6px;
          color: #fff;
          font-size: 12px;
          letter-spacing: 1px;
          font-weight: lighter;
          width: 70px;
          height: 28px;
          align-items: center;
          justify-content: center;
          background-color: #1CAAF6;
          border-radius: 6px;
          border-bottom-left-radius: 0;
          margin-right: 5px;
          position: relative;
          top:-3px
        }
        >span:last-child {
          font-size: 22px;
        }
      }
    }
    >.pic {
      display: flex;
      justify-content: center;
      height: 200px;
      transform: scale(0.8) translateY(-10%);
    }
    >.option {
      padding-top: 20px;
      >div {
        display: flex;
        margin-bottom: 30px;
        >div {
          // width: 28px;
          min-width: 28px;
          height: 28px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background-color: #fff;
          box-shadow: 0 0 4px 1px rgba($color: #000, $alpha: .2);
          margin-right: 12px;
  
          &.ok {
            background-color: #1EACF8;
          }
          &.err {
            background-color: #FF6867;
          }
          &.no {
            background-color: #AFB6C9;
          }
          >span {
            position: relative;
            top: 1px;
            &.not {
              color: #fff
            }
          }
        }
        >span:last-child {
          font-size: 20px;
  
          &.ok {
            color: #1EACF8;
          }
          &.err {
            color: #FF6867;
          }
        }
      }
    }
    >.resultBox {
      padding-bottom: 40px;

      >.submit {
        color: #fff;
        text-align: center;
        padding: 9px 0 10px;
        border-radius: 20px;
        background-image: linear-gradient(90deg, #27C2FD, #3C8EF9 );
      }

      >.result {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 9px 15px 10px;
        background-color: #F2F5FA;

        >div:first-child {
          margin-right: 20px;
        }

        .letter {
          margin-left: 10px;
          color: #25A8E9;
          font-size: 18px;


          &.err {
            color: #D8100B;
          }
        }
      }
    }
    >.explain {
      >p:first-child {
        margin-bottom: 15px;
      }
      >p:last-child {
        font-size: 18px;
      }
    }
  }
  >.control {
    width: 100%;
    position: fixed;
    top: 80%;
    .btn {
      opacity: 0.1;
      &:hover {
        opacity: 0.3;
      }
      &:active {
        opacity: 0.4;
      }
    }
    .left {
      position: absolute;
      left: 0;
    }
    .right {
      position: absolute;
      right: 0;
    }
  }
}
.message {
  margin-top: 200px;
  font-size: 14px;
  color: #888;
  text-align: center;
}
.footer {
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  position: fixed;
  bottom: 0;

  >div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    >.dele {
      margin-right: 20px;
      .del {
        transform: translateY(2px);
      }
    }
    >.collect {
      display: inline-block;
    }
    span {
      font-size: 12px;
      margin-left: 5px;
      &.sub {
        color: #fff;
        background-image: linear-gradient(90deg, #02DFE4, #008AF3);
        border-radius: 20px;
        padding: 4px 12px;
        margin-left: 15px;
      }
    }
  }
  >.mark {
    display: flex;
    
    >.ok {
      // margin-left: 8px;
      >span {
        color: #1EACF8;
      }
    }
    >.err {
      margin-left: 28px;
      >span {
        color: #FF6867;
      }
    }
    span {
      margin-left: 3px;
      font-size: 14px; 
    }
  }
  .counts {
    display: flex;
    >span {
      font-size: 14px;
      color: #A1A1A1;
      margin-left: 2px;
      
      >span {
        color: #333;
      }
    }
  }
}
.pages {
  padding-top: 20px;
  >ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    >li {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 8px 15px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid #E6E6E6;
      color: #909090;
      position: relative;
      .collect-active {
        position: absolute;
        top: -2px;
        right: -2px;
      }
    }
    .ok {
      background-color: #DDF1FC;
      color: #35A2E0;
      border: 0;
    }
    .err {
      background-color: #FCE5DF;
      color: #DF585F;
      border: 0;
    }
    .active {
      border: 1px solid #35A2E0;
    }
    .err.active {
      border: 1px solid #DF585F;
    }
  }
  >.end {
    background-color: #F9F9F9;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >span {
      font-size: 14px;

      &.btn {
        font-size: 12px;
        color: #2CA6E6;
        display: inline-block;
        padding: 2px 12px 3px;
        border: 1px solid #2CA6E6;
        border-radius: 30px;
      }
    }
  }
}



</style>
<style>
:root:root {
  --van-tab-font-size: 12px;
  --van-dropdown-menu-shadow: 0;
  --van-dropdown-menu-height: 30px;
  --van-dropdown-menu-title-font-size: 14px;
}
</style>